<template>
  <div class="login">
    <div class="login_box">
      <div class="par_absolute">
        <img src="../assets/02.jpeg" alt />
      </div>
      <el-form
        ref="theFrom"
        status-icon
        label-width="50px"
        :model="formInline"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="账号" prop="user">
          <el-input
            type="text"
            v-model="formInline.user"
            prefix-icon="User"
            placeholder="请输入账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="formInline.pass"
            placeholder="请输入密码"
            clearable
            show-password
            prefix-icon="Lock"
          />
        </el-form-item>

        <el-form-item label-width="0">
          <el-button
            type="primary"
            @click="onSubmit(theFrom)"
            @keyup.enter.native="onSubmit(theFrom)"
          >登录</el-button>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button @click="onReset(theFrom)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { postLogin, getMenus } from "../tools/ajax.js";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();

const theFrom = reactive({});
const formInline = reactive({
  user: "",
  pass: ""
});
const rules = {
  user: [
    {
      required: true,
      message: "请输入账号",
      trigger: "change"
    },
    {
      min: 2,
      max: 6,
      message: "账号长度在2-6位之间",
      trigger: "change"
    }
  ],
  pass: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change"
    },
    {
      min: 4,
      max: 12,
      message: "密码长度在4-12位之间",
      trigger: "change"
    }
  ]
};

const onSubmit = from => {
  from.validate(flag => {
    console.log(flag);
    if (flag) {
      postLogin({
        username: formInline.user,
        password: formInline.pass
      }).then(res => {
        console.log(res.data, res.meta);
        if (res.meta.status == 200) {
          window.sessionStorage.setItem("token", res.data.token);
          window.sessionStorage.setItem("name", res.data.username);
          // store.commit("setuserInfo", res.data);
          getMenus({ type: "list" }).then(res => {
            let arr = ["/asshole", "/login", "/page404"];
            res.data.forEach(item => {
              item.children.forEach(el => {
                arr.push("/" + el.path);
                if (el.path == "goods") {
                  arr.push("/goods/all");
                }
              });
            });
            window.sessionStorage.setItem("menus", JSON.stringify(arr));
            router.push("/home");
            ElMessage.success("登录成功");
          });
        } else {
          ElMessage.error(res.meta.msg);
        }
      });
    } else {
      return;
    }
  });
};

const onReset = from => {
  from.resetFields();
};
</script>





<style scoped>
.login {
  background-color: #b26262;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: url(https://img.tt98.com/d/2020/2020061018025866/5ee0a1e6cb0c3.jpg)
    no-repeat center;
  background-size: 100% 100%;
}
.login_box {
  background-color: #fff;
  width: 600px;
  height: 300px;
  border-radius: 30px;
  padding: 80px 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.par_absolute {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100px;
  border: 5px solid #126380;
  overflow: hidden;
  top: -90px;
  left: calc(50% - 75px);
}
.par_absolute img {
  height: 100%;
  width: 100%;
}
.el-form .el-form-item__content {
  justify-content: center;
}
.el-button {
  width: 100%;
}
</style>